import React from "react";
import "../commonHeader/index.css";
import { useDispatch } from "react-redux";
import { CollapseMenu } from "../../store/reducers/tab";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { Dropdown, Avatar, Button, Layout, theme } from "antd";
import { useNavigate, } from "react-router-dom";

//Main(父)通过dispatch获取store的值，再通过组件标签传给两个子组件aside和header
//子组件接收父组件传来的store中的值时，一定要先解构出来再通过参数接收
//collapse是从main.js传来的
const CommonHeader = ({ collapse }) => {
  console.log(collapse)
  const navigate = useNavigate();
  const logout = () => {
    //清除token
    localStorage.removeItem("token");
    navigate("/login");
  };
  const items = [
    {
      label: (
        <a target="_blank" rel="noopener noreferrer" onClick={() => logout()}>
          {/* 点击事件一定要用箭头函数写成回调函数，不然一开始就会执行一次 logout
          回调函数是异步的，只有触发点击事件才会执行回调*/}
          退出
        </a>
      ),
      key: "0",
    },
    {
      label: (
        <a target="_blank" rel="noopener noreferrer">
          个人中心
        </a>
      ),
      key: "1", 
    },
  ];
  const { Header } = Layout;
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const dispatch = useDispatch();
  const setCollapsed = () => {
    dispatch(CollapseMenu());
    // console.log(collapse);
  };

  return (
    <Header
      style={{
        padding: 0,
        background: colorBgContainer,
      }}
    >
      <div className="header">
        <Button
          type="text"
          icon={collapse ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={() => setCollapsed(!collapse)}
          style={{
            fontSize: "16px",
            width: 64,
            height: 64,
          }}
        />
        <Dropdown
          menu={{
            items,
          }}
        >
          <a onClick={(e) => e.preventDefault()}>
            <Avatar
              src={<img src={require("../../assets/images/user.png")} />}
            />
          </a>
        </Dropdown>
      </div>
    </Header>
  );
};
export default CommonHeader;
